<template>
  <el-drawer
    title="查看"
    :visible.sync="visible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :wrapperClosable="false"
    :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="6"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="图片详情" v-show="fileList.length > 0">
          <el-image
            v-for="item in fileList"
            :key="item.attachmentId"
            style="width: 320px; height: 210px; margin-right: 12px"
            :src="item.filePath"
            :preview-src-list="filePicArr"
          >
          </el-image>
        </el-form-item>
        <div v-show="fileList.length === 0" style="font-size: 12px;padding-left: 80px;margin-bottom: 24px">暂无图片</div>
        <el-form-item>
          <el-button type="primary" v-show="this.approveId" @click="handlePass"
            >通过</el-button
          >
          <el-button type="danger" v-show="this.approveId" @click="handleReject"
            >驳回</el-button
          >
          <el-button @click="handleClose">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE, PLEASE_INPUT } from "@/util/constant";
import { uploadAttachmentApi } from "@/api/modules/common.api";
import { getImgCollDetailApi } from "@/api/modules/imgColl.api";
import { approvePass, approveReject } from "@/api/modules/approve.api";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      visible: false,
      form: {
        name: "",
        attrIdList: "",
        content: "",
      },
      limit: 1,
      uploadApi: uploadAttachmentApi,
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
      filePicData: {
        objType: 4,
      },
      drawerSize: DRAWER_SIZE,
      orgList: [],
      roleList: [],

      showFilePicList: [],
      rules: {
        imgName: [{ required: true, message: PLEASE_INPUT, trigger: "blur" }],
      },
      filePic: "",
      filePicArr: [],
      approveId: "",
      fileList: [],
    };
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async init(id, approveId) {
      this.approveId = approveId;
      const res = await getImgCollDetailApi(id);
      this.form.name = res.name;
      this.form.content = res.content;
      // console.log("res", res);
      this.fileList = res.attachmentList;
      // this.filePic =
      //     res.attachmentList.length > 0 ? res.attachmentList[0].filePath : "";
      // this.filePicArr.push(this.filePic);
      res.attachmentList.forEach((item) => {
        this.filePicArr.push(item.filePath);
      });

      if (process.env.VUE_APP_ENV === 'local') {
        this.fileList.map(item => {
          item.filePath = item.filePath.replace("http://127.0.0.1:8080", "http://x15wywe2l9f7.xiaomiqiu.com")
        })
      }

      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    handleUploadPic(response, f, fileList) {
      this.form.attrIdList = [];
      fileList.forEach((item) => {
        if (item.response.code === 200) {
          this.form.attrIdList.push(item.response.data.attachmentId);
        }
      });
    },
    handleRemovePic(file, fileList) {
      this.form.attrIdList = [];
      fileList.forEach((item) => {
        if (item.response.code === 200) {
          this.form.attrIdList.push(item.response.data.attachmentId);
        }
      });
    },
    async handlePass() {
      await approvePass({ id: this.approveId });
      this.$message({
        message: "成功",
        type: "success",
      });
      this.visible = false;
      await this.$router.push({ path: "/approval/list" });
      this.setBreadcrumb([
        {
          name: "审批管理",
          path: "/approval",
        },
        {
          name: "我的待办",
          path: "/approval/list",
        },
      ]);
    },
    async handleReject() {
      await approveReject({ id: this.approveId });
      this.$message({
        message: "成功",
        type: "success",
      });
      this.visible = false;
      await this.$router.push({ path: "/approval/list" });
      this.setBreadcrumb([
        {
          name: "审批管理",
          path: "/approval",
        },
        {
          name: "我的待办",
          path: "/approval/list",
        },
      ]);
    },
  },
};
</script>
